{% extends "templates/defaultLayout.html" %}
{% block content %}
  <div class="index-container2">
    <div class="index-main">
      <div class="document-list">
        <div class="list-header">
          <h1>{{ documentListTitle }}</h1>
          <span>Choose a document to analyze</span>
          <p>
          {% if folderResourceId %}
            <div>
              <a href="/csv?folderResourceId={{ folderResourceId }}">
                Download table</a>
            </div>
            <div>
              <a href="/folderexport?resourceID={{ folderResourceId }}">
                  Folder export (new)</a>
            </div>
          {% endif %}
          </p>
        </div>
        <div class="resources"></div>
        <script>
          {% for resourceLink in resourceLinks %}
            $.ajax({
              type: "GET",
              url: "/requestAResource",
              data: {
                resourceLink: '{{ resourceLink }}'
              },
              beforeSend: createLoadResourceToDomFunction({{loop.index}}),
              success: createAddResourceToDomFunction(".resource-{{ loop.index }}")
            });
          {% endfor %}
        </script>
      </div>
      {% if showFolders %}
        <div class="folders-list">
          <div class="list-header">
            <h1>{{ folderListTitle }}</h1>
            <span>Choose a folder to analyze</span>
          </div>
          <div class="resources">
            {% for folder in folders %}
              <div class="folder">
                <a href="/step3?resource={{ folder.id }}">{{ folder.title }}</a>
              </div>
            {% endfor %}
          </div>
        </div>
      {% endif %}
    </div>
  </div>
{% endblock %}
